<template>
    <div class="chess-info-container flex column justify-content-space-around">
        <div class="user-info flex">
            <div class="avatar">
                <el-avatar v-if="props.enemyUserInfo.url" size="26" :src="props.enemyUserInfo.url"/>
                <el-avatar v-else size="26" :src="logo"/>
            </div>
            <div class="user-data">
                <div class="name">{{props.enemyUserInfo.name}}</div>
                <div class="time flex align-items-center">
                    <el-icon :size="16" color="#fff">
                        <Timer/>
                    </el-icon>
                    <span>{{userTimesText}}</span>
                </div>
            </div>
        </div>
        <div class="date flex align-items-center">
            <el-icon :size="16" color="#fff">
                <Clock/>
            </el-icon>
            <span>{{props.matchTimesText}}</span>
        </div>
        <div class="user-info flex">
            <div class="avatar">
                <el-avatar v-if="props.userInfo.url" size="26" :src="props.userInfo.url"/>
                <el-avatar v-else size="26" :src="logo"/>
            </div>
            <div class="user-data">
                <div class="name">{{props.userInfo.name}}</div>
                <div class="time flex align-items-center">
                    <el-icon :size="16" color="#fff">
                        <Timer/>
                    </el-icon>
                    <span>{{userTimesText}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import {Timer, Clock} from '@element-plus/icons-vue';
    import logo from '@/assets/logo.png';
    import {defineProps} from 'vue';

    const props = defineProps({
        userInfo: {},
        enemyUserInfo: {},
        matchTimesText: String,
        userTimesText: String
    })
</script>

<style scoped lang="less">
    .chess-info-container {
        position: absolute;
        left: calc(50% - 320px);
        top: 0;
        bottom: 0;
        color: #fff;

        .user-info {
            background: rgba(155, 141, 128, 0.8);
            padding: 5px 10px;
            font-size: 12px;

            .avatar {
                margin-right: 5px;
            }

            .time {
                span {
                    height: 12px;
                    margin-left: 3px;
                }

                margin-top: 5px;
            }
        }

        .date {
            background: rgba(155, 141, 128, 0.8);
            padding: 5px 20px;
            font-size: 12px;

            span {
                height: 12px;
                margin-left: 3px;
            }
        }
    }
</style>